   <template>
   <div>
   <van-tabbar v-model="active" active-color="green" route>
      <van-tabbar-item to="/" :badge="3">
        <span>首页</span>
        <template #icon >

          <van-icon name="home-o" badge="9" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item  icon="search" to="/sendlist">发布</van-tabbar-item>
      <van-tabbar-item to="/gerenziliao" icon="setting-o">我的</van-tabbar-item>
    </van-tabbar>
    </div>
    </template>
    <script>

import { TabbarItem , Tabbar} from 'vant'
    export default {
        name:"tabars",
        components:{
            [Tabbar.name]:Tabbar,
            [TabbarItem.name]:TabbarItem
        },
        data() {
            return {
                 active: 0,
            };
        },
        
    }
    </script>
    <style>
    .van-hairline--top-bottom.van-tabbar.van-tabbar--fixed {
    width: 100vw;
}
    </style>